<template>

  <div class="temp-hum-card">
    <div class="card-header">
      <span class="name">{{ sensor?.sensorName }}</span>
      <div class="status-group">
        <el-tag size="small" :type="sensor?.currentRecord?.online ? 'success' : 'info'" effect="dark">
          {{ sensor?.currentRecord?.online ? '在线' : '离线' }}
        </el-tag>
        <el-tag size="small" class="status-tag">
          📶
          {{ sensor?.currentRecord?.signalStrength || 0 }}dBm
        </el-tag>
        <el-tag size="small" class="status-tag" :type="getBatteryType(sensor?.currentRecord?.quantity)">
          🔋
          {{ sensor?.currentRecord?.quantity || 0 }}%
        </el-tag>
      </div>
    </div>
    
    <div class="card-content">
      <!-- 当前数据区域 -->
      <div class="current-data">
        <EchartsCard 
          :options="getTemperatureGaugeOptions(sensor?.currentRecord?.temperature || 0)" 
          height="100%"
          title="当前温度"
        />
        <EchartsCard 
          :options="getHumidityGaugeOptions(sensor?.currentRecord?.humidity || 0)" 
          height="100%"
          title="当前湿度"
        />
      </div>

      <!-- 历史数据区域 -->
      <div class="history-data">
        <EchartsCard 
          :options="getTemperatureChartOptions(historyData)" 
          height="100%"
          title="温度变化趋势"
        />
        <EchartsCard 
          :options="getHumidityChartOptions(historyData)" 
          height="100%"
          title="湿度变化趋势"
        />
      </div>
    </div>
  </div>
</template>

<script>
import EchartsCard from './EchartsCard.vue'

export default {
  name: 'TempHumCard',
  components: {
    EchartsCard
  },
  props: {
    sensor: {
      type: Object,
      default: () => null
    },
    historyData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getBatteryType(value) {
      if (value >= 60) return 'success';
      if (value >= 30) return 'warning';
      return 'danger';
    },
    getTemperatureGaugeOptions(value) {
      // 定义温度范围及对应的颜色
      const tempRanges = [
        { min: 0, max: 15, color: '#409EFF' },   // 低温蓝色
        { min: 15, max: 30, color: '#67C23A' },  // 正常绿色
        { min: 30, max: 50, color: '#F56C6C' }   // 高温红色
      ]
      
      // 根据当前值获取对应的颜色
      const currentColor = tempRanges.find(range => 
        value >= range.min && value <= range.max
      )?.color || '#909399'

      return {
        series: [{
          type: 'gauge', // 仪表盘类型
          min: 0,        // 最小值
          max: 50,       // 最大值
          radius: '85%', // 仪表盘半径，相对于容器
          center: ['50%', '60%'], // 仪表盘中心位置 [横向位置, 纵向位置]
          
          // 仪表盘轴线相关配置
          axisLine: {
            lineStyle: {
              width: 20, // 轴线宽度
              // 轴线颜色，为数组，每个元素为 [位置百分比, 颜色]
              color: [
                [0.3, '#409EFF'],  // 0-30% 蓝色
                [0.6, '#67C23A'],  // 30-60% 绿色
                [1, '#F56C6C']     // 60-100% 红色
              ]
            }
          },
          
          // 指针相关配置
          pointer: {
            itemStyle: {
              color: currentColor // 指针颜色，随数值变化
            },
            length: '60%', // 指针长度
            width: 4      // 指针宽度
          },
          
          // 刻度线相关配置
          axisTick: {
            distance: -20,  // 刻度线与轴线距离，负值向内，正值 outward
            length: 10,      // 刻度线长度
            lineStyle: {
              color: '#fff', // 刻度线颜色
              width: 1       // 刻度线宽度
            }
          },
          
          // 分隔线相关配置
          splitLine: {
            distance: -20,  // 分隔线与轴线距离，负值向内，正值 outward
            length: 20,     // 分隔线长度
            lineStyle: {
              color: '#fff', // 分隔线颜色
              width: 3       // 分隔线宽度
            }
          },
          
          // 刻度标签相关配置
          axisLabel: {
            color: '#999',   // 标签颜色
            distance: -15,    // 标签与轴线距离
            fontSize: 12     // 标签字体大小
          },
          
          // 仪表盘数值显示相关配置
          detail: {
            valueAnimation: true,     // 数值变化时启用动画
            formatter: '{value}°C',   // 数值格式化
            color: currentColor,      // 数值颜色，随数值变化
            fontSize: 20,             // 数值字体大小
            offsetCenter: [0, '80%']  // 数值位置偏移，相对于中心点
          },
          
          // 数据
          data: [{
            value: value,  // 当前值
            name: '温度'   // 名称（未显示）
          }]
        }]
      }
    },

    getHumidityGaugeOptions(value) {
      // 定义湿度范围及对应的颜色
      const humidityRanges = [
        { min: 0, max: 40, color: '#E6A23C' },   // 过低（干燥）黄色
        { min: 40, max: 70, color: '#67C23A' },  // 适中绿色
        { min: 70, max: 100, color: '#409EFF' }  // 过高（潮湿）蓝色
      ]
      
      // 根据当前值获取对应的颜色
      const currentColor = humidityRanges.find(range => 
        value >= range.min && value <= range.max
      )?.color || '#909399'

      return {
        series: [{
          type: 'gauge', // 仪表盘类型
          min: 0,        // 最小值
          max: 100,      // 最大值
          radius: '85%', // 仪表盘半径，相对于容器
          center: ['50%', '60%'], // 仪表盘中心位置 [横向位置, 纵向位置]
          
          // 仪表盘轴线相关配置
          axisLine: {
            lineStyle: {
              width: 20, // 轴线宽度
              // 轴线颜色，为数组，每个元素为 [位置百分比, 颜色]
              color: [
                [0.4, '#E6A23C'],  // 0-40% 黄色（干燥）
                [0.7, '#67C23A'],  // 40-70% 绿色（正常）
                [1, '#409EFF']     // 70-100% 蓝色（潮湿）
              ]
            }
          },
          
          // 指针相关配置
          pointer: {
            itemStyle: {
              color: currentColor // 指针颜色，随数值变化
            },
            length: '60%', // 指针长度
            width: 4      // 指针宽度
          },
          
          // 刻度线相关配置
          axisTick: {
            distance: -20,  // 刻度线与轴线距离，负值向内，正值 outward
            length: 10,      // 刻度线长度
            lineStyle: {
              color: '#fff', // 刻度线颜色
              width: 1       // 刻度线宽度
            }
          },
          
          // 分隔线相关配置
          splitLine: {
            distance: -20,  // 分隔线与轴线距离，负值向内，正值 outward
            length: 20,     // 分隔线长度
            lineStyle: {
              color: '#fff', // 分隔线颜色
              width: 3       // 分隔线宽度
            }
          },
          
          // 刻度标签相关配置
          axisLabel: {
            color: '#999',   // 标签颜色
            distance: -15,    // 标签与轴线距离
            fontSize: 12     // 标签字体大小
          },
          
          // 仪表盘数值显示相关配置
          detail: {
            valueAnimation: true,     // 数值变化时启用动画
            formatter: '{value}%',    // 数值格式化
            color: currentColor,      // 数值颜色，随数值变化
            fontSize: 20,             // 数值字体大小
            offsetCenter: [0, '80%']  // 数值位置偏移，相对于中心点
          },
          
          // 数据
          data: [{
            value: value,  // 当前值
            name: '湿度'   // 名称（未显示）
          }]
        }]
      }
    },

    getTemperatureChartOptions(data) {
      const temperatures = data.map(item => item.temperature)
      const maxTemp = Math.max(...temperatures)
      const minTemp = Math.min(...temperatures)
      const avgTemp = (temperatures.reduce((a, b) => a + b, 0) / temperatures.length).toFixed(1)

      return {
        tooltip: {
          trigger: 'axis'
        },
        title: {
          text: `最高: ${maxTemp}°C  最低: ${minTemp}°C  平均: ${avgTemp}°C`,
          textStyle: {
            fontSize: 12,
            color: '#666'
          },
          left: 'center',
          top: 0
        },
        grid: {
          left: '8%',
          right: '4%',
          bottom: '8%',
          top: '40px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.map(item => 
            new Date(item.recordTime).toLocaleTimeString('zh-CN', {
              hour: '2-digit',
              minute: '2-digit'
            })
          )
        },
        yAxis: {
          type: 'value',
          name: '温度(°C)',
          min: 0,
          max: 50
        },
        series: [{
          name: '温度',
          type: 'line',
          smooth: true,
          data: temperatures,
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ]
          },
          itemStyle: {
            color: '#409EFF'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(64,158,255,0.3)'
              }, {
                offset: 1,
                color: 'rgba(64,158,255,0)'
              }]
            }
          }
        }]
      }
    },

    getHumidityChartOptions(data) {
      const humidities = data.map(item => item.humidity)
      const maxHum = Math.max(...humidities)
      const minHum = Math.min(...humidities)
      const avgHum = (humidities.reduce((a, b) => a + b, 0) / humidities.length).toFixed(1)

      return {
        tooltip: {
          trigger: 'axis'
        },
        title: {
          text: `最高: ${maxHum}%  最低: ${minHum}%  平均: ${avgHum}%`,
          textStyle: {
            fontSize: 12,
            color: '#666'
          },
          left: 'center',
          top: 0
        },
        grid: {
          left: '8%',
          right: '4%',
          bottom: '8%',
          top: '40px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.map(item => 
            new Date(item.recordTime).toLocaleTimeString('zh-CN', {
              hour: '2-digit',
              minute: '2-digit'
            })
          )
        },
        yAxis: {
          type: 'value',
          name: '湿度(%)',
          min: 0,
          max: 100
        },
        series: [{
          name: '湿度',
          type: 'line',
          smooth: true,
          data: humidities,
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ]
          },
          itemStyle: {
            color: '#67C23A'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(103,194,58,0.3)'
              }, {
                offset: 1,
                color: 'rgba(103,194,58,0)'
              }]
            }
          }
        }]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.temp-hum-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-sizing: border-box;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    height: 32px; // 固定头部高度

    .name {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
    }
  }

  .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0; // 防止溢出

    .current-data {
      display: flex;
      justify-content: space-between;
      height: 26%; // 占整个内容区域的三分之一
      min-height: 160px; // 设置最小高度，防止太小
      gap: 12px;
      
      :deep(.echarts-card) {
        width: 45%;
      }
    }

    .history-data {
      flex: 1; // 占用剩余空间
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 5px;

      :deep(.echarts-card) {
        width: 90%;
        flex: 1; // 每个图表占用相等空间
        min-height: 180px; // 设置最小高度，防止太小
      }
    }
  }
}
</style>
